.main .banner {
  width: 100%;
  height: 600px;
}
.main .banner img {
  width: 100%;
  height: 600px;
}
.main .online-course {
  padding-top: 150px;
  width: 1200px;
}
.main .online-course h2 {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 51.57px;
  color: #333333;
}
.main .online-course .course-list {
  display: flex;
  margin-top: 40px;
  justify-content: space-between;
  width: 1200px;
  height: 282px;
}
.main .online-course .course-list .course-item {
  width: 282px;
  height: 282px;
  opacity: 1;
  border-radius: 23px;
  background: linear-gradient(147.89deg, #f7fcff 0%, #ffffff 53.09%, #f7fcff 100%);
  border: 1px solid #ffffff;
  box-shadow: 0px 11px 25px rgba(156, 159, 165, 0.1), 0px 45px 45px rgba(156, 159, 165, 0.09);
}
.main .online-course .course-list .course-item img {
  width: 282px;
  height: 158px;
  opacity: 1;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #ecf5ff;
}
.main .online-course .course-list .course-item h3 {
  margin-top: 20px;
  margin-left: 20px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 28.13px;
  color: #333333;
}
.main .online-course .course-list .course-item p {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 22px;
  color: #333333;
}
.main .online-course .course-list .course-item:hover {
  background: #1842b6;
}
.main .online-course .course-list .course-item:hover h3,
.main .online-course .course-list .course-item:hover p {
  color: white;
}
.main .skill {
  padding-top: 150px;
  width: 1200px;
}
.main .skill h2 {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 51.57px;
  color: #333333;
}
.main .skill .course-list2 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  justify-content: space-between;
  width: 1200px;
}
.main .skill .course-list2 .course-item2 {
  margin-right: 12px;
  margin-bottom: 24px;
  width: 282px;
  height: 282px;
  opacity: 1;
  border-radius: 23px;
  background: linear-gradient(147.89deg, #f7fcff 0%, #ffffff 53.09%, #f7fcff 100%);
  border: 1px solid #ffffff;
  box-shadow: 0px 11px 25px rgba(156, 159, 165, 0.1), 0px 45px 45px rgba(156, 159, 165, 0.09);
}
.main .skill .course-list2 .course-item2 img {
  width: 282px;
  height: 158px;
  opacity: 1;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #ecf5ff;
}
.main .skill .course-list2 .course-item2 h3 {
  margin-top: 20px;
  margin-left: 20px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 28.13px;
  color: #333333;
}
.main .skill .course-list2 .course-item2 p {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 22px;
  color: #333333;
}
.main .skill .course-list2 .course-item2:hover {
  background: #1842b6;
}
.main .skill .course-list2 .course-item2:hover h3,
.main .skill .course-list2 .course-item2:hover p {
  color: white;
}
.main .skill .course-list2 .course-item2:nth-last-child(4n) {
  margin-right: 0px;
}
